<template>
  <div class="feedBack-container">
    <!-- 3*6表格 -->
    <div class="table-box">
      <el-table
          :data="tableData"
		  :show-header="false">
        <el-table-column
            width="50"
            prop="level">
          <template v-slot:default="scope">
            <div style="font-weight: bold; font-size: 16px; background-color: #f9f9f9">{{ scope.row.level }}</div>
          </template>
        </el-table-column>
        <el-table-column
            width="100"
            prop="type">
          <template v-slot:default="scope">
            <div style="font-weight: bold; font-size: 16px; background-color: #f9f9f9">{{ scope.row.type }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="description">
        </el-table-column>
      </el-table>
      <!-- 中间提示及预估空气质量指数等级选择框 -->
      <p style="fontWeight: bold;">请预估当前空气质量指数等级:</p>
      <el-radio-group v-model="ruleForm.airQualityIndex">
        <el-radio :label="1">
          <template v-slot="{ isChecked }">
            <span
                :style="{ fontWeight: isChecked ? 'bold' : 'normal', color: '#ffffff', backgroundColor: '#5cb85c', padding: '5px', borderRadius: '3px' }">一</span>
          </template>
        </el-radio>
        <el-radio :label="2">
          <template v-slot="{ isChecked }">
            <span
                :style="{ fontWeight: isChecked ? 'bold' : 'normal', color: '#ffffff', backgroundColor: '#f0ad4e', padding: '5px', borderRadius: '3px' }">二</span>
          </template>
        </el-radio>
        <el-radio :label="3">
          <template v-slot="{ isChecked }">
            <span
                :style="{ fontWeight: isChecked ? 'bold' : 'normal', color: '#ffffff', backgroundColor: '#f0ad4e', padding: '5px', borderRadius: '3px' }">三</span>
          </template>
        </el-radio>
        <el-radio :label="4">
          <template v-slot="{ isChecked }">
            <span
                :style="{ fontWeight: isChecked ? 'bold' : 'normal', color: '#ffffff', backgroundColor: '#d9534f', padding: '5px', borderRadius: '3px' }">四</span>
          </template>
        </el-radio>
        <el-radio :label="5">
          <template v-slot="{ isChecked }">
            <span
                :style="{ fontWeight: isChecked ? 'bold' : 'normal', color: '#ffffff', backgroundColor: '#a94442', padding: '5px', borderRadius: '3px' }">五</span>
          </template>
        </el-radio>
        <el-radio :label="6">
          <template v-slot="{ isChecked }">
            <span
                :style="{ fontWeight: isChecked ? 'bold' : 'normal', color: '#ffffff', backgroundColor: '#843534', padding: '5px', borderRadius: '3px' }">六</span>
          </template>
        </el-radio>
      </el-radio-group>
      <!-- 填写反馈信息的输入框 -->
      <el-form label-width="80px" style="fontWeight: bold;">
        <el-form-item label="反馈信息" style="margin-top: 20px;">
          <el-input type="textarea" v-model="ruleForm.feedback"></el-input>
        </el-form-item>
      </el-form>
	  <el-form-item>
	    <el-button type="primary" @click="submitFeedback" class="supervisor-button">提交</el-button>
	  </el-form-item>
    </div>
  </div>
</template>
<script setup>

import {reactive, ref, onMounted} from 'vue';
import axios from 'axios';
import {useRouter, useRoute} from 'vue-router';
import {ElMessage} from "element-plus";

const router = useRouter();
const route = useRoute();
const ruleFormRef = ref()
let formData;
const tableData = ref([
  {level: '一', type: '优', description: '空气质量令人满意，基本无空气污染'},
  {level: '二', type: '良', description: '空气质量可接受，但某些污染物能对极少数异常敏感人群健康有较弱影响'},
  {level: '三', type: '轻度污染', description: '易感人群症状有轻度加剧，健康人群出现刺激症状'},
  {level: '四', type: '中度污染', description: '进一步加到易感人群症状，可能对健康人群心脏，呼吸系统有能响'},
  {level: '五', type: '重度污染', description: '心驻病和肺病患者症状显著加剧，运动耐受力降低，健康人群普遍出现症状'},
  {level: '六', type: '严重污染', description: '健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病'}
]);
onMounted(() => {
  formData = route.query.formData ? JSON.parse(route.query.formData) : {};
  //console.log(formData); // 现在你可以使用 formData 了
      ruleForm.province = formData.province || '';
      ruleForm.city = formData.city || '';
      ruleForm.address = formData.address || '';
    }
);

function cellClassName({column, rowIndex}) {
  if (column.property === 'level' || column.property === 'type') {
    return {'background-color': '#f5f5f5', 'font-weight': 'bold', 'font-size': '16px'};
  }
  return '';
}

let ruleForm = reactive({
  airQualityIndex: '',
  feedback: '',
  province: '',
  city: '',
  address: ''
});
const resetForm = () => {
  ruleFormRef.value.resetFields()
}
// 提交反馈信息的逻辑，可以发送到后端或进行其他处理
const submitFeedback = () => {
  console.log('submit')

  //let context = JSON.parse(this.$route.query.formData);
  let context = formData;
  let data = {
    supervisorId: JSON.parse(sessionStorage.getItem('supervisor')).supervisorId,
    provinceId: context.province,
    cityId: context.city,
    address: context.address,
    aqiLevel: ruleForm.airQualityIndex,
    comment: ruleForm.feedback
  }
  console.log(data)
  axios.post('http://localhost:8085/submitFeedback',data).then(res =>{
        let result = res.data;
        if(result.code == 1){
          ElMessage.success('提交成功！');
          router.push({
            name: 'supervisor'
          })
        }else {
          ElMessage.error('提交失败！')
        }
      }
  )
  // try {
  //   // 这里的'/api/your-endpoint'是你的后端API端点
  //   const response = await axios.post('/api/your-endpoint',ruleForm);
  //   console.log(response.data); // 在控制台打印后端返回的数据
  //   // 这里可以处理后端返回的数据
  // } catch (error) {
  //   console.error('An error occurred:', error);
  //   // 这里可以处理错误
  // }
  /*
  router.push({
    name: 'supervisor',

  });*/
}

</script>

<style scoped>
.feedBack-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e0f7fa; /* 蓝绿色背景色 */
   min-height: 100vh;
}

.table-box {
  
  /* padding: 20px; */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  /* margin-bottom: 30px; */
}
.supervisor-button {
    background-color: #70b0bc; /* 蓝绿色按钮 */
    border-color: #00796b;
    width: 100%;
    height: 40px;
    border-radius: 8px;
	}
</style>